<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{
				font-size: 62.5%;
			}
			.container{
				width: 50rem;
				height:40rem;
				border: 1px solid #ff0000;
				background: #CDCDCD;
				cursor: pointer;
			}
			.choice{
				width: 36rem;
				height: 3rem;
				padding: 0 2rem;
				line-height: 3rem;
				background: #FFFFFF;
				box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
				position: relative;
			}
			.select{
				width: 40rem;
				height: 20rem;
				overflow-y: auto;
				background: #FFFFFF;
				box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
				display: none;
				position: absolute;
			}
			.select-item{
				width: 36rem;
				padding: 0 2rem;
				margin: 0.5rem 0;
				height: 3rem;
				line-height: 3rem;
			}
			.select-item:hover{
				background: #f2f2f2;
			}
			.radio{
				width: 2rem;
				height: 2rem;
				cursor: pointer;
				text-align: center;
				line-height: 2rem;
				border: 1px solid #000;
				margin: auto;
			}
			.radio:active{
				transform: scale(0.9);
			}
			.radio-select{
				display: none;
			}
			input{
				width: 30rem;
				height: 3rem;
				line-height: 3rem;
				border: 1px solid #E6E6E6;
				border-radius: 2px;
				outline: none;
				padding-left: 0.5rem;
			}
			input:focus{
				border: 1px solid #000;
			}
			.test{
				width: 40rem;
				height: 30rem;
				overflow-y: auto;
				background: pink;
				margin: auto;
				
				
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="choice"></div>
			<div class="select">
				<div class="select-item">搜集和整理各种1234</div>
				<div class="select-item">搜集和整理各种wqqweq</div>
				<div class="select-item">搜集和整理sd各种3</div>
				<div class="select-item">搜集和整理sds各种eqweq</div>
				<div class="select-item">搜集和整理各种weqwe</div>
				<div class="select-item">搜集和整理各种xx</div>
				<div class="select-item">搜集和整理各种asdsad</div>
				<div class="select-item">搜集和整理各zz种</div>
			</div>
			
			<div class="test">
				
			</div>
			
			
		</div>
	
		
		
		<div class="container">
			<div class="radio">
				<span class="radio-select">
					OK
				</span>
		    </div>
		</div>
		<div class="container">
			<input type="text" name="" id="" value="" placeholder="请输入内容"/>
		</div>
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript" >
		    //多选框显示与隐藏
		    $(".choice").click(function(){
		    	$(".select").animate({height:'toggle'});
		    })
		
			$(".select-item").each(function(){
				this.onclick = function(){
					$(".choice").text($(this).text());
					$(".select").css("display","none");
				}
			})
			
			
			//单选框
			$(".radio").click(function(){
				$(".radio>span").toggle();
			})
			
			//input
		
		</script>
	</body>
</html>
